<template>
  <div class="person">
    <van-nav-bar
      title="个人信息"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="head">
      <div class="circle">
        <img src="../../assets/image/kuihua1.jpeg" alt="" />
      </div>
    </div>
    <div class="name">
      <span>昵称：</span>
      <input type="text" v-model="list.ziliao.name" />
    </div>
    <div class="sex">
      <span>性别：</span>
      <input type="text" v-model="list.ziliao.sex" />
    </div>
    <div class="desc">
      <span>介绍：</span>
      <input type="text" v-model="list.desc" />
    </div>
  </div>
</template>

<script>
import { put } from "../../tools/request";
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      axios
        .put("http://192.168.0.124:3002/api/l1/user/updata", {
          account: this.list.account,
          desc: this.list.desc,
          ziliao: {
            name: this.list.ziliao.name,
            sex: this.list.ziliao.sex,
          },
        })
        .then((res) => {
          alert("修改成功");
          this.list = res.data.data;
          localStorage.setItem("account", JSON.stringify(this.list));
        });
    },
  },
  created() {
    this.$store.commit("tabHide");
    this.list = JSON.parse(localStorage.getItem("account"));
  },
};
</script>

<style lang="scss">
.person {
  .van-nav-bar__content {
    background-color: rgba(51, 177, 123, 1);
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
  }
  .head {
    height: 166px;
    width: 100%;
    background-color: rgba(51, 177, 123, 1);
    overflow: hidden;
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 35px auto;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .name,
  .desc,
  .sex {
    height: 49px;
    line-height: 49px;
    margin-left: 10px;
    span {
      color: rgba(80, 80, 80, 1);
      font-size: 14px;
    }
    input {
      line-height: 20px;
      border: 0;
      color: rgba(153, 164, 189, 1);
      font-size: 14px;
    }
  }
}
</style>